<template>
  <Nuxt-Layout>
    <el-breadcrumb class="my-crumb">
      <el-breadcrumb-item v-for="(item, index) in crumbData" :key="index">
        <a :href="item.href">{{ item.title }}</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div class="con">
      <div class="con-cen">
        <div class="con-cen-video">
          <h2 class="con-cen-video-title">{{ currentVideo.title || "请选择您要看课程视频" }}</h2>
          <div class="con-cen-video-left">
            <!-- <div class="con-cen-video-left-qrcode"
              v-if="isLogin && infoData.purchased && currentVideo.hours > 0 && isUserAuth == false">
              <el-image :src="qrcodeIdUrl" class="con-cen-video-left-qrcode-image" />
              <p class="con-cen-video-left-qrcode-text">请用微信扫一扫，完善认证信息</p>
              <el-button type="primary" class="con-cen-video-left-qrcode-btn" :loading="sginDisabled"
                @click="getUserAuth()">我已成功认证</el-button>
            </div>
            <div class="con-cen-video-left-qrcode" v-else-if="isSgin && currentVideo.hours > 0">
              <el-image :src="qrcodeUrl" class="con-cen-video-left-qrcode-image" />
              <p class="con-cen-video-left-qrcode-text">{{ sginNotice }}</p>
              <el-button type="primary" class="con-cen-video-left-qrcode-btn" :loading="sginDisabled"
                @click="getSgin('click')">{{ sginBtnText }}</el-button>
            </div>
            <MyVideo :videoCurrentData="currentVideo" :videoYuan="currentVideoYuan" :videoYuanName="currentVideoYuanName" :videoYuanId="currentVideoYuanId" :videoSign="currentVideoSign" @end="videoEndFn" v-else /> -->
            <MyVideo :videoCurrentData="currentVideo" :videoYuan="currentVideoYuan" :videoYuanName="currentVideoYuanName" :videoYuanId="currentVideoYuanId" :videoSign="currentVideoSign" @end="videoEndFn" />
          </div>
          <div class="con-cen-video-right">
            <p class="con-cen-video-right-title">
              目录（{{ chapters.length }}）
            </p>
            <div style="height: 20px"></div>
            <el-scrollbar height="370">
              <el-collapse v-model="chaptersIndex" accordion>
                <el-collapse-item v-for="(item, index) in chapters" :key="item.id"
                  :title="`${index + 1 < 10 ? '0' + (index + 1) : index + 1} ${item.name}`" :name="index"
                  @change="chaptersIndex = index">
                  <a class="el-button el-button--large is-text videos-btn" v-for="ite in item.videos" :key="ite.id"
                    :class="ite.id == currentVideo.id ? 'el-button--primary is-has-bg' : ''" :href="ite.href"
                    :title="ite.title">
                    <el-icon style="margin-right: 5px">
                      <VideoCamera />
                    </el-icon>
                    <p class="videos-btn-text">{{ ite.title }}</p>
                    <template v-if="ite.hours > 0">
                      <el-text type="primary" v-if="ite.clock && ite.clock.status == 2">学习中</el-text>
                      <el-text type="info" v-if="ite.clock && ite.clock.status > 2">已学完</el-text>
                      <el-text type="warning" v-if="!ite.clock || ite.clock && ite.clock.status < 2">未学习</el-text>
                    </template>
                    <el-text type="info" v-else>无学时</el-text>
                  </a>
                </el-collapse-item>
              </el-collapse>
            </el-scrollbar>
          </div>
        </div>
        <div class="con-cen-info-notice">
          <el-icon class="notice-icon">
            <WarningFilled />
          </el-icon>
          <p class="notice-text">
            <el-text type="danger">提醒：观看课程视频前需要签到，课程视频结束后需要签退，若未签到签退则不记录当前课程视频学时。</el-text>
          </p>
        </div>
        <div class="con-cen-info">
          <p class="con-cen-info-title">{{ infoData.title }}</p>
          <ul class="con-cen-info-desc">
            <li class="con-cen-info-desc-li">
              <el-tag>课程学时：{{ currentVideo.hours ? (currentVideo.hours).toFixed(1) : '-' }}</el-tag>
            </li>
            <li class="con-cen-info-desc-li">
              <el-tag type="info">每日最多学时：{{ infoData.dayOfHours > 0 ? (infoData.dayOfHours).toFixed(1) : "不限制"
                }}</el-tag>
            </li>
            <li class="con-cen-info-desc-li">
              <el-tag type="warning">今日已获学时：{{ infoData.userDayOfHours ? (infoData.userDayOfHours).toFixed(1) : "-"
                }}</el-tag>
            </li>
            <li class="con-cen-info-desc-li">
              <el-tag type="error">已获取总学时：{{ infoData.userTotalHours ? (infoData.userTotalHours).toFixed(1) : '-'
                }}</el-tag>
            </li>
          </ul>
          <div class="con-cen-info-notice" v-if="isLogin && !infoData.purchased">
            <el-icon class="notice-icon">
              <WarningFilled />
            </el-icon>
            <p class="notice-text">
              <span>提醒：所有课程可免费观看30秒，继续观看请</span>
              <el-text type="danger" style="cursor: pointer" @click="buyCourseFn">点击购买</el-text>
            </p>
          </div>
        </div>
        <div class="details">
          <div class="left-details">
            <p class="left-details-title" style="color: initial">课程留言</p>
            <ul class="left-details-message">
              <template v-for="item in messageData" :key="item.id">
                <li class="left-details-message-li">
                  <p class="left-details-message-li-name">
                    <span>留言者：{{ item.commentName || "-" }}</span>
                    <el-button type="primary" size="small" @click="replyOpen(item)">回复</el-button>
                  </p>
                  <p class="left-details-message-li-con">
                    <span style="padding-right: 10px">留言内容：</span>
                    <span style="flex: 1; overflow: hidden">{{
                      item.commentContent
                    }}</span>
                    <span style="padding-left: 10px">{{ item.commentTime }}</span>
                  </p>
                </li>
                <li class="left-details-message-li" v-for="(ite, ind) in item.replys" :key="ind"
                  style="margin-left: 40px">
                  <p class="left-details-message-li-name">
                    回复者：{{ ite.replyName || "-" }}<el-tag size="small" :type="ite.type < 1 ? 'danger' : 'success'"
                      style="margin-left: 10px">{{ ite.type < 1 ? "机构" : "用户" }}</el-tag>
                  </p>
                  <p class="left-details-message-li-con">
                    <span style="padding-right: 10px">回复内容：</span>
                    <span style="flex: 1; overflow: hidden">{{
                      ite.replyContent
                    }}</span>
                    <span style="padding-left: 10px">{{ ite.replyTime }}</span>
                  </p>
                </li>
              </template>
              <el-empty v-show="messageData.length < 1" />
            </ul>
            <div class="pagin">
              <el-pagination background layout="prev, pager, next, total" :page-size="messageForm.pageSize"
                :total="messageTotal" v-model:current-page="messageForm.pageNum" @change="pageChangeFn"
                hide-on-single-page />
            </div>
            <div class="left-details-release">
              <el-input type="textarea" v-model="releaseForm.commentContent" rows="5" placeholder="请输入留言内容..."
                autocomplete="off" />
              <a class="el-button el-button--warning" href="/login" style="margin-top: 10px" v-if="!isLogin">登录</a>
              <el-button type="primary" style="margin-top: 10px" :disabled="releaseDisabled" @click="releaseFn"
                v-else>发送</el-button>
            </div>
          </div>
          <div class="details-right">
            <p class="right-title">讲师信息</p>
            <div class="right-info" v-for="item in infoData.teachers" :key="item.id">
              <el-image class="right-info-avatar" :src="item.portrait" fit="cover" :alt="item.name" />
              <div class="right-info-item">
                <p class="right-info-item-title">{{ item.name }}</p>
                <p class="right-info-item-brief">
                  {{ item.brief || "这位讲师很懒，还没有填写自我介绍哦~" }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <ReplyForm :visible="replyVisible" :forms="replyForm" @pick="replyPickFn" />
    <!-- 二维码 -->
  </Nuxt-Layout>
</template>

<script setup>
import { VideoCamera, WarningFilled } from "@element-plus/icons-vue";
import { getClock, getLessonInfoApi, getCommentApi, addCommentApi, replyCommentApi, lessonPurchaseApi, getUserInfoApi, getVideoInfo, getPlaySign } from "~/server/api";
import { isEmpty } from "~/utils/utils";
import { useCountStore } from "~/store/counter.js";
import ReplyForm from "./replyform";
useCountStore().$patch({ indexActive: 3 });
const crumbData = ref([
  { title: '首页', href: '/' },
  { title: '课程中心', href: '/curriculum' },
])
// TDK
const prevHost = useRequestHeaders()["x-forwarded-proto"];
const host = useRequestHeaders()["host"];
const fullPath = useRoute()["fullPath"];
const seoTitle = ref("技考邦_课程详情");
const seoKeywords = ref("技考邦,课程详情");
const seoDescription = ref("技考邦，课程详情。");
const isLogin = ref(!isEmpty(useRoute().meta.userinfo) ? true : false);
const userinfo = useRoute().meta.userinfo;
const isUserAuth = ref(userinfo ? userinfo.idCertifiedStatus == 1 ? true : false : null); // 是否身份认证
const isSgin = ref(null); // 是否打卡
const isSginStatus = ref(0); // 打卡状态
const courseId = useRoute().params.courseId || "";
const chapterId = useRoute().params.chapterId || "";
const courseVideoId = useRoute().params.videoId || "";
const infoData = ref({});
const chapters = ref([]);
const chaptersIndex = ref(0);
const currentVideo = ref({});
const currentVideoYuan = ref([]);
const currentVideoYuanName = ref('画质'); // 视频流名称;
const currentVideoYuanId = ref(); // 视频流ID;
const currentVideoSign = ref('');
const sginData = ref({})
const sginDisabled = ref(false)
const sginNotice = ref('请扫码进入小程序签到')
const sginBtnText = ref('我已成功签到')
let qrcodePrevUrl = 'https://api.jkb100.com/api/wx/qrcode.jpg';
let qrcodePageUrl = '?page=pages/curriculum_details/auth';
let qrcodeIdPageUrl = '?page=pages/userCenter/identity';
let qrcodeVersion = 'release';
const qrcodeUrl = ref(`${qrcodePrevUrl}${qrcodePageUrl}&envVersion=${qrcodeVersion}&scene=${courseVideoId},2${userinfo ? ',' + userinfo.id : ''}`) // 视频ID，签到，用户ID
const qrcodeIdUrl = ref(`${qrcodePrevUrl}${qrcodeIdPageUrl}&envVersion=${qrcodeVersion}&scene=${userinfo ? userinfo.id : ''}`)
// 验证路由
definePageMeta({
  validate: async (route) => {
    return /^1\d{5,}$/.test(route.params.courseId) && /^1\d{5,}$/.test(route.params.chapterId) && /^1\d{5,}$/.test(route.params.videoId);
  }
})
// 视频播放结束
const videoEndFn = () => {
  if (sginData.value.status == 2) {
    sginNotice.value = '请扫码进入小程序签退';
    sginBtnText.value = '我已成功签退';
    qrcodeUrl.value = `${qrcodePrevUrl}${qrcodePageUrl}&envVersion=${qrcodeVersion}&scene=${courseVideoId},3${userinfo ? ',' + userinfo.id : ''}`;
    isSgin.value = true;
  }
}
// 获取签到信息
const getSgin = async (way) => {
  // 点击触发
  if (way === 'click') { sginDisabled.value = true; }
  let { data: sginRes } = await useAsyncData('getClock', () => useServerRequest(getClock, {
    method: 'get',
    params: { courseVideoId }
  }))
  setTimeout(() => {
    sginDisabled.value = false;
  }, 1500)
  if (sginRes.value && sginRes.value.errno === 0) {
    sginData.value = sginRes.value.result;
    // 视频没有进度设置初始数据
    if (!currentVideo.value.clock) {
      currentVideo.value.clock = {
        courseVideoId: currentVideo.value.id,
        status: sginData.value.status,
        currentDuration: sginData.value ? sginData.value.currentDuration : 0
      }
    }
    // 签到失败
    if (way === 'click' && sginData.value.status < 2 && isSginStatus.value < 2) {
      ElMessage.error('未读取到您签到信息，请前往小程序进行签到')
    }
    // 签到成功
    if (way === 'click' && sginData.value.status == 2 && isSginStatus.value < 2) {
      isSgin.value = false;
      currentVideo.value.clock.status = 2;
      ElMessage.success('签到成功')
    }
    // 签退失败
    if (way === 'click' && sginData.value.status == 2 && isSginStatus.value == 2) {
      ElMessage.error('未读取到您签退信息，请前往小程序进行签退')
    }
    // 签退成功
    if (way === 'click' && sginData.value.status > 2 && isSginStatus.value == 2) {
      isSgin.value = false;
      currentVideo.value.clock.status = 3;
      ElMessage.success('签退成功')
    }
    // 学习中 已学完
    if (!way && sginData.value.status >= 2) {
      isSgin.value = false;
    }
    isSginStatus.value = sginData.value.status;
    return false
  }
}
// getSgin()
// 获取详情
const getInfo = async () => {
  let { data: infoRes } = await useAsyncData("getLessonInfoApi", () =>
    useServerRequest(getLessonInfoApi, {
      method: "get",
      params: { courseId }
    })
  );
  if (infoRes.value && infoRes.value.errno === 0 && infoRes.value.result) {
    infoData.value = infoRes.value.result;
    crumbData.value.push({ title: infoData.value.title, href: 'javascript:;' })
    // 修改TDK
    seoTitle.value = infoData.value.title;
    seoDescription.value = infoData.value.brief;
    // 章节 默认跳转第一章节
    if (infoData.value.chapters && infoData.value.chapters.length > 0) {
      let videosFlag = true;
      infoData.value.chapters.forEach((item, index) => {
        if (item.id == chapterId) {
          chaptersIndex.value = index;
        }
        // 设置视频跳转路径
        if (item.videos && item.videos.length > 0) {
          item.videos.forEach((ite) => {
            ite.href = `/curriculum_details/${infoData.value.id}-${item.id}-${ite.id}.html`;
            if (ite.id == courseVideoId) {
              // 设置视频进度默认值
              if (!ite.clock) {
                ite.clock = {
                  courseVideoId: ite.id,
                  status: 0,
                  currentDuration: 0
                }
              }
              currentVideo.value = ite;
              videosFlag = false;
              // 打卡展示 已购买 视频状态处于未学习
              isSgin.value = infoData.value.purchased && sginData.value.status < 2 ? true : false;
              // 修改TDK
              seoTitle.value = ite.title;
              seoKeywords.value = `技考邦,${infoData.value.title},${item.name},${ite.title}`;
              seoDescription.value = `${infoData.value.brief}，${item.name}，${ite.title}`;
            }
          });
        }
      });
      // 判断视频是否存在
      if (courseVideoId && videosFlag) {
        showError({ statusCode: 404, statusMessage: `Page not found: ${useRoute().path}` });
      }
      chapters.value = infoData.value.chapters;
    }
    return false;
  }
  showError({ statusCode: 404, statusMessage: `Page not found: ${useRoute().path}` });
};
getInfo();
// 获取视频元
async function getVideoYuanFn() {
  let { data: videoYuanRes } = await useAsyncData(() => useServerRequest(getVideoInfo, {
    method: 'get',
    params: { courseVideoId: courseVideoId }
  }))
  if (videoYuanRes.value && videoYuanRes.value.errno === 0) {
    // 排序 0 100040 100030
    videoYuanRes.value.result.sort((a, b) => b - a)
    let lastYuan = videoYuanRes.value.result.pop()
    videoYuanRes.value.result.unshift(lastYuan)
    currentVideoYuan.value = videoYuanRes.value.result;
    // 这是初始清晰度
    if (useRoute().query.y) {
      currentVideoYuanId.value = useRoute().query.y;
      currentVideoYuanName.value = useRoute().query.y == 100030 ? '流畅' : useRoute().query.y == 100040 ? '高清' : '原画';
      getVideoSignFn(parseInt(useRoute().query.y))
      return false;
    }
    currentVideoYuanId.value = (currentVideoYuan.value.indexOf(100030) > -1) ? 100030 : 0;
    currentVideoYuanName.value = currentVideoYuanId.value === 100030 ? '流畅' : '原画';
    getVideoSignFn(currentVideoYuanId.value)
  }
}
getVideoYuanFn()
// 获取视频签名
async function getVideoSignFn(transcodeDefinition) {
  let { data: videoSignRes } = await useAsyncData(() => useServerRequest(getPlaySign, {
    method: 'get',
    params: { courseVideoId: courseVideoId, transcodeDefinition }
  }))
  if (videoSignRes.value && videoSignRes.value.errno === 0 && videoSignRes.value.result) {
    currentVideoSign.value = videoSignRes.value.result;
  }
}
// 课程留言
const messageForm = ref({
  pageNum: parseInt(useRoute().query.p) || 1,
  pageSize: 5,
  courseId,
  courseVideoId,
});
const messageData = ref([]);
const messageTotal = ref(0);
const getMessage = async () => {
  let { data: messageRes } = await useAsyncData("getCommentApi", () =>
    useServerRequest(getCommentApi, {
      method: "post",
      body: JSON.stringify(messageForm.value),
    })
  );
  if (messageRes.value && messageRes.value.errno === 0) {
    messageData.value = messageRes.value.result.list || [];
    messageTotal.value = messageRes.value.result.total;
    return false;
  }
};
getMessage();
// 分页
const pageChangeFn = (val) => {
  let href = `/curriculum_details/${courseId}-${chapterId}-${courseVideoId}.html?p=${val}`;
  getMessage();
  useRouter().push(href);
};
// 购买课程
const buyCourseDisabled = ref(false);
const buyCourseFn = async () => {
  buyCourseDisabled.value = true;
  let { errno, errmsg, result } = await useServerRequest(lessonPurchaseApi, {
    method: "post",
    body: JSON.stringify({ id: infoData.value.id }),
  });
  if (errno === 0 && !result) {
    ElMessage({
      message: "购买成功",
      type: "success",
    });
    infoData.value.purchased = true;
    buyCourseDisabled.value = false;
    return false;
  }
  if (errno === 0 && result) {
    window.location.href = `/trading/${courseId}.html`;
  }
  buyCourseDisabled.value = false;
};
// 发送留言
const releaseDisabled = ref(false);
const releaseForm = ref({
  courseId,
  courseVideoId,
  commentContent: "",
});
const releaseFn = async () => {
  if (releaseForm.value.commentContent == "") {
    ElMessage({
      message: "请输入回复内容",
      type: "warning",
    });
    return false;
  }
  releaseDisabled.value = true;
  let { errno, errmsg, result } = await useServerRequest(addCommentApi, {
    method: "post",
    body: JSON.stringify(releaseForm.value),
  });
  if (errno === 0) {
    ElMessage({
      message: "发送成功",
      type: "success",
    });
    getMessage();
    releaseForm.value.commentContent = "";
    releaseDisabled.value = false;
    return false;
  }
  releaseDisabled.value = false;
};
// 回复
const replyVisible = ref(false);
const replyForm = ref({});
const replyOpen = (val) => {
  replyForm.value.id = val.id;
  replyForm.value.replyContent = "";
  replyVisible.value = true;
};
const replyPickFn = async (e) => {
  replyVisible.value = e.visible;
  if (e.form) {
    if (e.form.replyContent == "") {
      ElMessage({
        message: "请输入回复内容",
        type: "warning",
      });
      return false;
    }
    let { errno, errmsg, result } = await useServerRequest(replyCommentApi, {
      method: "post",
      body: JSON.stringify(e.form),
    });
    if (errno === 0) {
      ElMessage({
        message: "回复成功",
        type: "success",
      });
      getMessage();
      return false;
    }
  }
};
// 刷新页面
const getUserAuth = () => {
  sginDisabled.value = true;
  useServerRequest(getUserInfoApi, {
    method: 'get'
  }).then((res) => {
    setTimeout(() => {
      sginDisabled.value = false;
    }, 1000)
    if (res.errno === 0 && res.result.idCertifiedStatus == 1) {
      window.location.reload()
      return false
    }
    ElMessage.error('未读取到您身份认证的信息，请前往小程序进行身份认证')
  })
}
// seo
useSeoMeta({
  title: seoTitle,
  keywords: seoKeywords,
  description: seoDescription,
  ogTitle: seoTitle,
  ogDescription: seoDescription,
  ogType: "article",
  ogUrl: `${prevHost}://${host}${fullPath}`,
});
</script>

<style lang="less">
.info-top-right-star {
  .el-rate .el-rate__icon {
    margin-right: 2px;
  }

  .el-rate__text {
    margin-left: 5px;
  }
}

.con-cen-video-right {
  .el-collapse-item__header.is-active {
    color: #409eff;
  }
}
</style>
<style lang="less" scoped>
.con {
  padding: 20px 0;
  min-height: calc(100vh - 454px);

  &-cen {
    width: 1200px;
    margin: 0 auto;

    &-video {
      background: #ffffff;
      border-radius: 10px;
      border: 1px solid #eaeae6;
      padding: 20px;
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;

      &-title {
        flex: 100%;
        font-weight: bold;
        font-size: 18px;
        margin: 0 0 20px 0;
      }

      &-left {
        width: 730px;
        height: 410px;
        margin-right: 20px;
        background-color: #000;
        overflow: hidden;
        position: relative;

        &-qrcode {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 1;
          text-align: center;

          &-image {
            width: 200px;
            height: 200px;
            display: block;
            margin: 0 auto;
          }

          &-text {
            margin-top: 10px;
            color: #fff;
          }

          &-btn {
            margin-top: 20px;
          }
        }
      }

      &-right {
        flex: 1;
        overflow: hidden;

        &-title {
          font-weight: bold;
          font-size: 18px;
          height: 20px;
          line-height: 20px;
        }

        .el-button+.el-button {
          margin-left: 0;
        }

        .videos-btn {
          width: 100%;
          justify-content: flex-start;

          &-text {
            text-align: left;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-right: 30%;
          }
        }
      }
    }

    &-info {
      margin-top: 20px;
      background: #ffffff;
      border-radius: 10px;
      border: 1px solid #eaeae6;
      padding: 20px;

      &-title {
        font-weight: bold;
        font-size: 18px;
      }

      &-desc {
        margin-top: 20px;
        display: flex;
        align-items: flex-start;

        &-li {
          margin-right: 20px;
          font-size: 16px;
          color: #666666;

          strong {
            color: #666666;
            font-size: 16px;
          }
        }
      }

      &-notice {
        height: 50px;
        background: #ffeded;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0 16px;
        margin-top: 10px;

        .notice-icon {
          color: #ff0000;
          margin-right: 16px;
          font-size: 17px;
        }

        .notice-text {
          font-size: 14px;
        }
      }
    }
  }
}

.details {
  margin-top: 20px;
  display: flex;
  align-items: flex-start;

  .left-details {
    flex: 1;
    padding: 20px;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #eaeae6;

    &-title {
      font-weight: bold;
      font-size: 18px;
      color: #666666;
    }

    &-con {
      margin-top: 20px;

      img {
        max-width: 100%;
      }
    }

    &-message {
      &-li {
        border-bottom: 1px solid #eaeae6;
        padding: 20px 0;

        &-name {
          font-size: 15px;
          display: flex;
          align-items: center;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        &-con {
          margin-top: 5px;
          font-size: 14px;
          color: #666;
          display: flex;
          align-items: flex-start;
        }

        &:last-child {
          border-bottom: 0;
          padding-bottom: 0;
        }
      }
    }

    &-release {
      margin-top: 20px;
    }
  }

  &-right {
    width: 320px;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #eaeae6;
    padding: 20px;
    margin-left: 20px;

    .right-title {
      font-weight: bold;
      font-size: 18px;
      color: #666666;
    }

    .right-info {
      margin-top: 20px;
      display: flex;
      align-items: flex-start;

      &-avatar {
        width: 80px;
        height: 100px;
        background: #cccccc;
        border-radius: 5px;
        margin-right: 20px;
      }

      &-item {
        flex: 1;
        overflow: hidden;

        &-title {
          font-weight: bold;
          font-size: 14px;
          color: #666666;
        }

        &-brief {
          font-size: 14px;
          margin-top: 10px;
          color: #666666;
        }
      }
    }
  }
}

.pagin {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

p {
  margin: 0;
}
</style>